<template>
	<!-- #ifndef MP -->
	<view>
		<view class="topbg">
			HI,欢迎来到佳和房产
		</view>
		<view class="box">
			<view class="t1">{{loginType==1?'登录':'绑定手机号'}}</view>
			<view class="input_item">
				<input type="number" @input="mobileFun" :value="mobile" placeholder-class="colac" placeholder="帐号" />
			</view>
			<view class="input_item df">
				<input type="number" @input="captchaFun" :value="captcha" placeholder-class="colac" placeholder="验证码"
					class="flex-grow-1" />
				<view v-if="dao_sec==60" @tap="sendCaptcha" class="code">获取验证码</view>
				<view v-else-if="dao_sec==0" @tap="sendCaptcha" class="code">重新获取</view>
				<view v-else class="code">重新获取({{dao_sec}})</view>
			</view>
			<view @tap="submit" class="login_btn">{{loginType==1?'登录':'提交'}}</view>
			<view class="df ac agreement">
				<view class="">登录本平台即代表你已同意并阅读</view>
				<navigator url="/pages/member/agreement/agreement" class="col009">《用户协议》</navigator>
			</view>
		</view>
		<!-- #ifndef H5 -->
		<view v-if="loginType==1" class="third tc">
			<view class="title df ac">
				<text class="center">第三方登录</text>
			</view>
			<view class="df ac jc">
				<view class="login_item" @tap="wxLogin()">
					<image src="/static/icon/icon_areaicon.png" mode=""></image>
					<view>微信登录</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
	<!-- #endif -->
	<!-- #ifdef MP -->
	<view>
		<u-navbar bgColor="#fff" leftIconSize="0" height="88rpx" title="登录" placeholder="true"></u-navbar>
		<view class="container">
			<view class="page-body">
				<view class="logo">
					<image :src="logo" mode="aspectFit"></image>
				</view>
				<view class="author_form m-hairline--top">
					<view class="title">佳和房产请求授权</view>
					<view v-if="loginType == 1" class="msg">获取您的信息（昵称、头像等）</view>
					<view v-if="loginType == 2" class="msg">获取您的手机号</view>

          <view class="flex-box plr30 pb30 fs28 mt40" @click="agreeChange()">
            <image class="icon-check mr20" v-if="agreeStatus" src="/static/icon/icon_check-on.png" mode="aspectFit"></image>
            <image class="icon-check mr20"v-else src="/static/icon/icon_check.png" mode="aspectFit"></image>
            <view class="" style="display: inline-block">
              <text class="col5">我已阅读并同意</text>
              <text class="blue" @click.stop="agreePopOpen">《用户注册及使用免责声明》</text>
              <text class="col5">及</text>
              <text class="blue" @click.stop="agreePopOpen2">《房源信息发布服务协议》</text>
            </view>
          </view>

					<button v-if="loginType == 1 || !agreeStatus" @tap="getUserProfile" hover-class="none"
						class="btn-purity">授权</button>
					<button v-if="loginType == 2" open-type="getPhoneNumber" @getphonenumber="bindGetPhoneNumber"
						hover-class="none" class="btn-purity">授权</button>
					<button hover-class="none" @tap="cancelAuth" class="btn-line">取消</button>
				</view>
			</view>
		</view>

    <u-popup :show="agreePopShow" mode="center" round="20" @close="agreePopClose" @open="agreePopOpen">
      <view class="add-pop">
        <view class="fs32 tc col3 mb20">{{article.name}}</view>
        <view class="agreement mb30 fs28">
          <u-parse :content="article.content"></u-parse>
        </view>
        <view class="flex-box flex-center">
          <view class="foot-btn1" @click="agreePopClose">关闭</view>
          <view class="foot-btn2" @click="agreeChange2">确定</view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="agreePopShow2" mode="center" round="20" @close="agreePopClose" @open="agreePopOpen2">
      <view class="add-pop">
        <view class="fs32 tc col3 mb20">{{article2.name}}</view>
        <view class="agreement mb30 fs28">
          <u-parse :content="article2.content"></u-parse>
        </view>
        <view class="flex-box flex-center">
          <view class="foot-btn1" @click="agreePopClose">关闭</view>
          <view class="foot-btn2" @click="agreeChange2">确定</view>
        </view>
      </view>
    </u-popup>
	</view>
	<!-- #endif -->
</template>

<script>
	const functions = require('../../../utils/functions.js');
	const app = getApp();
	export default {
		data() {
			return {
				logo: '',
				platform: 'app',
				loginType: 1, //1=手机号登录页面，2=绑定手机号页面
				btnStatus: false,
				dao_sec: 60, //倒计时秒
				mobile: '',
				captcha: '',
				openid: '', //绑定手机号时存一下openid
				agreeStatus: false, //是否同意协议
        article:{},
        article2:{},
        agreePopShow:false,
        agreePopShow2:false,
			}
		},
		onLoad() {
			// #ifdef MP
			// this.login();
      var that = this;
      functions.getAjaxData('/api/xiluhouse.article/article_detail', {id:56}, function (res) {
        that.article = res.data
      })
      functions.getAjaxData('/api/xiluhouse.article/article_detail', {id:52}, function (res) {
        that.article2 = res.data
      })
			// #endif
			this.logo = app.globalData.config.app_logo;

		},
		methods: {
      agreeChange(){
        this.agreeStatus = !this.agreeStatus
      },
      agreePopOpen() {
        this.agreePopShow = true
      },
      agreeChange2(){
        this.agreePopShow = false;
        this.agreePopShow2 = false;
        this.agreeStatus = true;
      },
      agreePopClose() {
        this.agreePopShow = false
        this.agreePopShow2 = false
      },
      agreePopOpen2() {
        this.agreePopShow2 = true
      },
			login(cb) {
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var json = {
							code: loginRes.code,
							pid: app.globalData.pid,
							is_login: 1,
						};
						functions.submitAjaxData(that, '/api/xiluhouse/user/login_hawk', json, function(res) {
							if (res.data.need_login_type == 2) {
								that.openid = res.data.openid;
								if(typeof cb == 'function') cb();
							} else {
								functions.afterLogin(res.data.userinfo);
								functions.showSuccess(res.msg, function() {
									// uni.navigateBack();
									uni.switchTab({
										url: "/pages/home/index/index"
									})
								});
							}
						});
					},
					fail: function(err) {
						// 登录授权失败
						functions.toast('授权失败，错误码：' + err.code);
						// err.code是错误码
					}
				});
			},
			mobileFun(e) {
				this.mobile = e.detail.value
			},
			captchaFun(e) {
				this.captcha = e.detail.value
			},
			sendCaptcha() {
				var that = this;
				var json = {
					mobile: that.mobile,
					event: 'mobilelogin',
				};
				if (!json.mobile) {
					functions.toast('请输入手机号');
					return false;
				}
				if (json.mobile.length != 11) {
					functions.toast('请输入正确的手机号');
					return false;
				}
				functions.submitAjaxData(that, '/api/sms/send', json, function(res) {
					functions.toast(res.msg);
					var i = 60;
					var timer = setInterval(function() {
						if (i < 1) {
							clearInterval(timer);
						} else {
							i--;
							that.dao_sec = i;
						}
					}, 1000);
				});
			},
			submit() {
				var that = this;
				var json = {
					mobile: that.mobile,
			  captcha: that.captcha,
					openid: that.openid,
				};
				if (!json.mobile) {
					functions.toast('请输入手机号');
					return false;
				}
				if (json.mobile.length != 11) {
					functions.toast('请输入正确的手机号');
					return false;
				}
				if (!json.captcha) {
					functions.toast('请输入验证码');
					return false;
				}
				functions.submitAjaxData(that, '/api/xiluhouse/user/mobilelogin', json, function(res) {
					functions.afterLogin(res.data.userinfo);
					functions.showSuccess(res.msg, function() {
						uni.$emit("getContract",{});
						uni.navigateBack();
						// uni.switchTab({
						// 	url: "/pages/home/index/index"
						// })
					});
				});
			},
			wxLogin() {
				var that = this;
				//按钮状态
				if (that.btnStatus) {
					return false;
				}
				uni.login({
					provider: 'weixin',
				 success: function(loginRes) {
						functions.submitAjaxData(that, '/api/xiluhouse/user/thirdlogin', loginRes.authResult,
							function(res) {
								if (res.data.need_login_type == 2) {
									that.loginType = 2;
									that.openid = res.data.openid;
									functions.toast('请绑定手机号');
								} else {
									functions.afterLogin(res.data.userinfo);
									functions.showSuccess(res.msg, function() {
										uni.$emit("getContract",{});
										uni.navigateBack();
										// uni.switchTab({
										// 	url: "/pages/home/index/index"
										// })
									});
								}
							});
					},
					fail: function(err) {
						console.log(err);
						// 登录授权失败
						functions.toast('授权失败，错误码：' + err.code);
						// err.code是错误码
					}
				});
			},
			// 取消授权返回上一页
			cancelAuth() {
				// uni.navigateBack();
				uni.switchTab({
					url: "/pages/home/index/index"
				})
			},
			getUserProfile() {
        var that = this;
        if(!that.agreeStatus){
          functions.toast("请先同意协议");
          return false;
        }
				//按钮状态
				if (that.btnStatus) {
					return false;
				}
				if (!that.openid) {
					this.login(this.getUserProfile);
					return false;
				}
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						console.log('getUserInfo', res);
						var json = {
							openid: that.openid,
							rawData: res.rawData,
							encryptedData: res.encryptedData,
							iv: res.iv,
							pid: app.globalData.pid,
						};
						functions.submitAjaxData(that, '/api/xiluhouse/user/update_user_hawk', json, function(
							res) {
							that.loginType = 2;
						});

					},
				});

			},
			bindGetPhoneNumber(e) {
        var that = this;
        if(!that.agreeStatus){
          functions.toast("请先同意协议");
          return false;
        }
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showModal({
						title: '温馨提示',
						content: '您已拒绝授权，无法获取手机号！',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.$emit("getContract",{});
								uni.navigateBack();
								// uni.switchTab({
								// 	url: "/pages/home/index/index"
								// })
							}
						}
					});
					return;
				} else {
					var json = {
						openid: this.openid,
					};
					let version = uni.getSystemInfoSync().SDKVersion;
					if(that.compareVersion(version,'2.21.2')>=0){
						json['code'] = e.detail.code;
					}else{
						json['encryptedData'] = e.detail.encryptedData;
						json['iv'] = e.detail.iv;
					}
					functions.submitAjaxData(that, '/api/xiluhouse/user/update_mobile_hawk', json, function(res) {
						functions.afterLogin(res.data.userinfo);
						functions.showSuccess(res.msg, function() {
							uni.$emit("getContract",{});
							uni.navigateBack();
							// uni.switchTab({
							// 	url: "/pages/home/index/index"
							// })
						});
					});
				}
			},
			//版本比较
			compareVersion(v1, v2) {
			  v1 = v1.split('.')
			  v2 = v2.split('.')
			  const len = Math.max(v1.length, v2.length)

			  while (v1.length < len) {
				v1.push('0')
			  }
			  while (v2.length < len) {
				v2.push('0')
			  }

			  for (let i = 0; i < len; i++) {
				const num1 = parseInt(v1[i])
				const num2 = parseInt(v2[i])

				if (num1 > num2) {
				  return 1
				} else if (num1 < num2) {
				  return -1
				}
			  }
			  return 0
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/static/css/old_project.css');
  .icon-check {
    display: block;
    width: 40rpx;
    height: 40rpx;
  }
	.col009 {
		color: #0091FF;
	}

	.third {
		padding: 0 50rpx;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		color: #999;
		font-size: 24rpx;
	}

	.third .center {
		padding: 0 20rpx;
	}

	.third .title {
		padding-bottom: 50rpx;
	}

	.third .title::before,
	.third .title::after {
		content: "";
		display: block;
		height: 2rpx;
		background-color: #999;
		opacity: .6;
		flex: 1;
	}


	.colac {
		color: #ACB1C0;
	}

	.login_item {
		font-size: 24rpx;
		color: #999;
		padding: 0 45rpx;
	}

	.login_item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 14rpx;
	}

	.agreement {
		font-size: 20rpx;
		color: #999;
		text-align: center;
	}

	.code {
		font-size: 30rpx;
		color: #FE973D;
	}

	.input_item {
		border-bottom: 2rpx solid #EAECEF;
		margin-top: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.input_item input {
		height: 100rpx;
		line-height: 100rpx;
		flex: 1;
	}

	.topbg {
		width: 750rpx;
		height: 280rpx;
		background: #0091FF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(3, 103, 179, 0.3);
		border-radius: 0rpx 0rpx 90rpx 0rpx;
		color: #fff;
		font-size: 40rpx;
		padding: 90rpx 40rpx 0;
	}

	.box {
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(184, 189, 202, 0.3);
		border-radius: 15rpx;
		margin: -60rpx auto 0;
		padding: 40rpx;
	}

	.t1 {
		font-size: 40rpx;
		color: #101010;
		line-height: 56rpx;
	}

	.login_btn {
		width: 600rpx;
		height: 90rpx;
		background: #0091FF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(3, 103, 179, 0.3);
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		line-height: 90rpx;
		margin: 54rpx auto 30rpx;
	}

	.page-body {
		padding: 30rpx 30rpx;
	}

	.logo {
		display: block;
		width: 337rpx;
		height: 337rpx;
		margin: 0 auto 30rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.logo image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.m-hairline--top::after {
		border-color: #e5e5e5;
	}

	.title {
		font-size: 35rpx;
		color: #101010;
		text-align: center;
		margin-bottom: 25rpx;
	}

	.msg {
		font-size: 35rpx;
		color: #898989;
		text-align: center;
		margin-bottom: 25rpx;
	}

	.protocol {
		font-size: 25rpx;
		color: #666666;
		padding: 0 30rpx;
		justify-content: center;
		margin-bottom: 76rpx;
	}

	.protocol image {
		display: block;
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.protocol text {
		color: #0091FF;
	}

	.btn-purity,
	.btn-line {
		display: block;
		width: 635rpx;
		height: 100rpx;
		border-radius: 99rpx;
		line-height: 98rpx;
		border: 1rpx solid #0091FF;
		font-size: 36rpx;
		text-align: center;
		margin: 38rpx auto 0;
	}

	.btn-purity {
		background-color: #0091FF;
		color: #fff;
	}

	.btn-line {
		color: #0091FF;
		background-color: #fff;
	}

	.author_form {
		padding-top: 60rpx;
	}

	/*  */
	.popup-protocol-wrap {
		width: calc(100vw - 120rpx);
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx 30rpx 40rpx;
	}

	.popup-protocol-head {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	.popup-protocol-close {
		display: block;
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.popup-protocol-main {
		max-height: 70vh;
		overflow-y: auto;
		font-size: 26rpx;
		color: #666666;
		line-height: 50rpx;
		margin-top: 30rpx;
	}

  .add-pop {
    padding: 40rpx 40rpx 50rpx;
    width: 650rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    .agreement{
      max-height: 40vh;
      overflow-y: scroll;
    }
    .foot-btn1 {
      margin: 0 20rpx;
      width: 230rpx;
      height: 80rpx;
      border-radius: 40rpx;
      border: 1px solid #CCCCCC;
      font-size: 30rpx;
      color: #aaa;
      line-height: 80rpx;
      text-align: center;
    }

    .foot-btn2 {
      margin: 0 20rpx;
      width: 230rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: var(--normal);
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 80rpx;
      text-align: center;
    }
  }
</style>
